<template>
	<view class="search app-pages">
		<view class="" style="height: 32rpx;;"></view>
		<view class="tab">
			<view class="tab-item" :class="tabIndex == 1? 'active' : ''" @click="hanldeTabs(1)">
				<text>销量</text>
				<view class="sort">
					<view class="up" :class="tabIndex1=='asc'?'active':''"></view>
					<view class="down" :class="tabIndex1=='desc'?'active':''"></view>
				</view>
			</view>
			<view class="tab-item" :class="tabIndex == 2? 'active' : ''" @click="hanldeTabs(2)" v-if="pageData.fileName != 'home-hot'">
				<text>价格</text>
				<view class="sort">
					<view class="up" :class="tabIndex2=='asc'?'active':''"></view>
					<view class="down" :class="tabIndex2=='desc'?'active':''"></view>
				</view>
			</view>
		</view>

		<view class="list">
			<view class="list-item" v-for="(item,index) in listData" :key="index" @click="handleClick(item)">
				<image :src="item.goodsPicAddress" mode="aspectFill" class="image"></image>
				<view class="right">
					<view class="title">{{item.goodsName}}</view>
					<view class="tool">
						<view class="price">
							<text style="font-size: 24rpx;margin-bottom: 8rpx;">￥</text>
							<text>{{item.mealCardPay || 0}}</text>
						</view>
						<image class="icon-car" src="/static/culturalCreativity/shiping-add.png" mode="aspectFit">
						</image>
					</view>
				</view>
			</view>
			
			<view>
				<u-loadmore :status="status" bgColor="#F7F7F7" marginTop="20"/>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		listHotApi,
		listAllShopping,
	} from "@/culturalCreativity/http/home.js";
	import {
		realmName
	} from "@/http";
	export default {
		data() {
			return {
				listData: [],
				pageData: {},
				pageNum: 1,
				tabIndex: 0,
				tabIndex1: '',
				tabIndex2: '',
				bottomLoading: true,
				status: 'nomore',
				goodsTypeId: ""
			}
		},
		onLoad({
			goodsTypeId
		}) {
			this.pageData = uni.getStorageSync('PAGE_DATA');
			this.goodsTypeId = goodsTypeId;
			uni.setNavigationBarTitle({
				title: this.pageData.title
			});
			this.pageNum = 1;
			this.getList();
		},
		onReachBottom() {
			this.getList();
		},
		methods: {
			hanldeTabs(numb) {
				this.tabIndex = numb;
				this.listData = [];
				this.pageNum = 1;
				this.bottomLoading = true;
				if (numb == 1) {
					this.tabIndex2 = '';
					if (this.tabIndex1 == 'asc') {
						this.tabIndex1 = 'desc'
					} else {
						this.tabIndex1 = 'asc'
					}
				}
				if (numb == 2) {
					this.tabIndex1 = '';
					if (this.tabIndex2 == 'asc') {
						this.tabIndex2 = 'desc'
					} else {
						this.tabIndex2 = 'asc'
					}
				}
				this.getList();
			},
			handleClick(options){
				uni.navigateTo({
					url:"/culturalCreativity/common/shoppingDetails?id="+options.goodsId
				})
			},
			async getList() {
				try {
					if (!this.bottomLoading) return;
					let sortOrder = `${this.tabIndex == 2 ? 'meal_card_pay' : 'sales_number'} ${this.tabIndex == 2 ? this.tabIndex2 : this.tabIndex1}`;
					let res
					this.bottomLoading = false;
					this.status = 'loading';
					if (this.pageData.fileName == 'home-hot') {
						res = await listHotApi({
							id: 1,
							pageNum: this.pageNum,
							pageSize: 20,
							sortOrder
						});
						this.listData = [...this.listData, ...res.data.rows.map(item => {
							item.goodsPicAddress = `${realmName}${item.goodsPicAddress.split(',')[0]}`;
							return item;
						})];
						if (res.data.total > this.listData.length) {
							this.pageNum = this.pageNum + 1;
							this.bottomLoading = true;
						}
					}
					if (this.pageData.fileName == 'classification') {
						res = await listAllShopping({
							pageNum: this.pageNum,
							pageSize: 20,
							goodsTypeId: this.goodsTypeId,
							sortOrder
						});
						this.listData = [...this.listData, ...res.data.rows.map(item => {
							item.goodsPicAddress = `${realmName}${item.goodsPicAddress.split(',')[0]}`;
							return item;
						})]
						if (res.data.total > this.listData.length) {
							this.pageNum = this.pageNum + 1;
							this.bottomLoading = true;
						}
					};
					this.status = 'nomore';
				} catch (e) {
					this.bottomLoading = false;
					this.status = 'nomore';
					console.error("classification文件夹下的detailsList.vue 错误", e);
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.search {
		min-height: 100vh;
		background-color: #F7F7F7;

		.tab {
			margin: 32rpx 0;
			display: flex;
			align-items: flex-end;
			font-size: 32rpx;
			font-weight: 400;
			color: #5A5A5A;
		}

		.tab-item {
			display: flex;
			align-items: center;
			position: relative;

			.sort {
				position: absolute;
				right: -30rpx;
				top: 0;

				.up,
				.down {
					width: 0;
					height: 0;
					border: 10rpx solid transparent;
				}

				.down {
					border-top-color: #C1C1C1;
					margin-top: 8rpx;
				}

				.up {
					border-bottom-color: #C1C1C1;
				}

				.down.active {
					border-top-color: #FD8F19;
				}

				.up.active {
					border-bottom-color: #FD8F19;
				}
			}
		}

		.tab-item+.tab-item {
			margin-left: 60rpx;
		}

		.tab-item.active {
			color: #1F1F1F;
			font-weight: 500;
		}

		.list {
			padding-bottom: 100rpx;

			.list-item {
				background-color: #FFFFFF;
				padding: 24rpx;
				display: flex;

				.right {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
				}

				&+.list-item {
					margin-top: 24rpx;
				}

				.image {
					min-width: 208rpx;
					max-width: 208rpx;
					height: 208rpx;
					border-radius: 16rpx;
					margin-right: 24rpx;
				}

				.title {
					font-size: 28rpx;
					font-weight: 500;
					color: #1F1F1F;
					width: 100%;
					display: -webkit-box;
					overflow: hidden;
					white-space: normal !important;
					text-overflow: ellipsis;
					word-wrap: break-word;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.tool {
					display: flex;
					justify-content: space-between;

					.price {
						font-size: 48rpx;
						font-weight: 500;
						color: #FD8F19;
						display: flex;
						align-items: flex-end;
					}

					.icon-car {
						width: 62rpx;
						height: 62rpx;
						border-radius: 50%;
					}
				}
			}
		}
	}
</style>
